<template>
  <div class="table-list">
    <el-table :data="records" class="width-per-100" :highlight-current-row="false"  element-loading-text="拼命加载中" v-loading="loading"
     element-loading-background="#2B2B2E" element-loading-spinner="el-icon-loading">
      <el-table-column label="排名" width="70">
        <template slot-scope="scope">
          <div v-if="scope.row.rank<=3">
            <img v-if="scope.$index === 0" :src="rankingIcon1" />
            <img v-else-if="scope.$index === 1" :src="rankingIcon2" />
            <img v-else-if="scope.$index === 2" :src="rankingIcon3" />
          </div>
          <div v-else class="pad-l-15">
           {{scope.row.rank}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="商品" width="510">
        <template slot-scope="scope">
          <div class="flex font-14 ">
            <div class="flex">
              <img class="width-84 height-84" :src="scope.row.mainImage" alt="">
            </div>
            <div class="flex-col pad-t-5 mar-l-14 width-per-100">
              <div>
                <div class="font-white line-1 goods-title">{{scope.row.title}}</div>
                <div v-if="scope.row.categoryName" class="height-24 mar-t-29 text-c flex">
                  <span class="sort-box pad-l-4 pad-r-4">{{scope.row.categoryName}}</span>
                </div>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="售价(元)" width="240">
        <template slot-scope="scope">
          <div>
            <span class="font-white" v-if="scope.row.sellPrice && scope.row.sellPrice !== '0.00'" v-formatNum="scope.row.sellPrice"></span>
            <span v-if="scope.row.scribingPrice && scope.row.scribingPrice !== '0.00'">/ 原价</span>
            <span v-if="scope.row.scribingPrice && scope.row.scribingPrice !== '0.00'" class="source-price" v-formatNum="scope.row.scribingPrice"></span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="salesNum" label="销量(件)" width="240"></el-table-column>
      <el-table-column prop="orderPrice" label="销售额(元)" width="230">
        <template slot-scope="scope">
          <div v-if="scope.row.orderPrice" v-formatNum="scope.row.orderPrice"></div>
        </template>
      </el-table-column>
      <el-table-column prop="refundRate" label="退款率">
        <template slot-scope="scope">
          <div v-if="scope.row.refundRate">{{scope.row.refundRate * 100}}%</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import rankingIcon1 from '@/assets/images/ranking-icon-1.png'
import rankingIcon2 from '@/assets/images/ranking-icon-2.png'
import rankingIcon3 from '@/assets/images/ranking-icon-3.png'
export default {
  data() {
    return {
      records: [],
      rankingIcon1,
      rankingIcon2,
      rankingIcon3,
      loading: false
    }
  },
  mounted() {
    const that = this
    this.$bus.$on('getDetailTable', (res) => {
      that.records = res
    })
    this.$bus.$on('loading', (res) => {
      this.loading = res
    })
  },
  methods: {
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .table-list {
    /deep/ .el-table {
      color:rgba(255,255,255,0.5);
      .el-table__header {
        tr{
          height: 48px;
          &>th:nth-child(1) {
            div {
              padding-left: 20px;
            }
          }
        }
      }
      .el-table__row {
        &>td:nth-child(1) {
          padding-left: 10px;
        }
      }
      th {
        background: #3A3A3E !important;
        color:rgba(255,255,255,0.5);
        border: none;
      }
      tr {
        background: #252529;
        height: 110px;
      }
      tr:hover>td { 
        background-color: #252529 !important; 
      }
      td {
        border-bottom: 1px solid #3A3A3E !important;
        color: #fff;
      }
      .el-table__empty-block {
        background: #252529;
        color:rgba(255,255,255,0.5);
      }
      .source-price {
        color: rgba(255,255,255,0.5);
      }
    }
    /deep/ .el-table--border::after, .el-table--group::after, .el-table::before {
      background-color: #252529 !important;
    }
    .sort-box {
      color: #1890FF;
      border: 1px solid #1890FF;
      border-radius: 4px;
      min-width: 74px;
      // padding: 0px 9px;
    }
    .line-1{
      line-height: 1.4;
      overflow:hidden;
      text-overflow:ellipsis;
      display:-webkit-box;
      -webkit-line-clamp:1;
      -webkit-box-orient:vertical;
      word-break:break-word;
    }
    .goods-title {
      max-width: 70%;
    }
  }
</style>